import React, { memo, useCallback, useEffect, useState } from 'react'
import { shallowEqual, useDispatch, useSelector } from 'react-redux'
import { DjRadioRankWrapper,ContentWrapper } from './style'
import { getDjradioRankAction } from '../../store/actionCreators'
import { formatImg } from '@/utils/format'
import Page from '@/components/page'
import useShowRadioDetail from '@/hooks/useShowRadioDetail'
export default memo(function DjradioRank() {
  const [currentOffset,setCurrentOffset] = useState(0)
  const { currentId, djradioRank,djradioCount } = useSelector(state => ({
    currentId: state.getIn(['djRadio', 'currentId']),
    djradioRank: state.getIn(['djRadio', 'djradioRank']),
    djradioCount:state.getIn(['djRadio','djradioCount'])
  }),shallowEqual)
  const dispatch = useDispatch()
  useEffect(() => {
    dispatch(getDjradioRankAction(currentId,currentOffset))
  }, [dispatch, currentId, currentOffset])
  const pageChange = useCallback(page => {
    setCurrentOffset((page - 1) * 22)
    dispatch(getDjradioRankAction(currentId,currentOffset))
  }, [dispatch, currentId, currentOffset])
  const goToRadioDetail = useShowRadioDetail()
  const ranks = djradioRank || []
  return (
    <DjRadioRankWrapper>
      <h2 className="title">电台排行榜</h2>
      <ContentWrapper>
        {
          ranks.map(item => {
            return (
              <div className="item" key={item.id}>
                <div className="left">
                  <img src={formatImg(item.picUrl,120)} alt="" onClick={e => goToRadioDetail(item.id)}/>
                </div>
                <div className="right">
                  <h3 className="name" onClick={e => goToRadioDetail(item.id)}>{item.name}</h3>
                  <div className="people">
                    <i className="sprite_icon2 icon"></i>
                    <span className='nickname'>{item.dj.nickname}</span>
                  </div>
                  <div className="info">
                    <span className='program'>共{item.programCount}期</span>
                    <span className='sub'>订阅{item.subCount}次</span>
                  </div>
                </div>
              </div>
            )
          })
        }
      </ContentWrapper>
      <Page pageSize={22} totalCount={djradioCount} pageChange={pageChange}/>
    </DjRadioRankWrapper>
  )
})
